<template>
  <div class="specialty">
    <div class="title-name border-bottom">{{title}}</div>
    <div class="list" v-if="list.length">
      <ul>
        <router-link tag="li" :to="'/specialtyDetails/'+item.id" class="border-bottom" v-for="item in list">
          <div class="pic">
            <img v-lazy="item.img.path" alt="">
          </div>
          <div class="text">
            <h3>{{item.goods_name}}</h3>
            <p class="price">{{item.goods_price}}</p>
            <p>{{item.addr}} <span>{{item.distance}}</span></p>
          </div>
          <div class="audit" v-if="showAudit">
            <p v-if="item.is_examine == '2'">审核失败</p>
            <p v-if="item.is_examine == '3'">未审核</p>
          </div>
        </router-link>
      </ul>
      <div class="moreLoading" v-show="showMore">
        <img src="~common/image/loading.gif">
      </div>
      <router-link tag="div" to="/specialtyRelease" class="btn" v-if="showBtn">
        发布
      </router-link>
    </div>

    <div id="allmap" style="display: none;"></div>
    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>
</template>

<script>
  import {goodsLists} from 'common/js/specialty'
  import Loading from 'components/loading/Loading'
  import {mapGetters} from 'vuex'
  import {isLogin} from 'common/js/user'
  import {scroll} from 'common/js/scroll'

  export default {
    data() {
      return {
        title: '土特产',
        showBtn: false,
        initLoading: true, //首次loading
        page: 1,//页数
        list: [],//列表数据
        lng: '', //经度
        lat: '', //维度
        share: 1,
        more: true,
        showMore: false,
        showAudit: false
      }
    },
    computed: {
      ...mapGetters([
        'loading'
      ])
    },
    mounted() {
      document.title = '土特产列表';
      //根据位置获取列表
      this.baiduMap();
      if (this.$route.params.sid === localStorage.getItem('token')) {
        this.showAudit = true;
        this.showBtn = true;
        this.share = 0
      }
      window.onscroll = () => {
        scroll(() => {
          if (this.more) {
            this._scroll();
          }
        });
      }
    },
    methods: {
      //加载更多
      _scroll() {
        this.page++;
        this.showMore = true;
        goodsLists({
          "page": this.page,//页数
          "phpsid": this.$route.params.sid,//session_id
          "lati": this.lat,//当前位置纬度
          "long": this.lng,//当前位置经度
          "share": this.$route.params.share,//1-分享进来的 0-本商家查看
        }).then(res => {
          this.showMore = false;
          if (res.status === 1) {
            if (res.data) {
              this.more = false;
            } else {
              this.list = this.list.concat(res.data)
            }
          }
        })
      },
      //百度地图
      baiduMap() {
        this.$store.dispatch('showLoading');
        var map = new BMap.Map("allmap");
        var _this = this;
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var point = new BMap.Point(r.point.lng, r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (res) {
              _this.lng = res.point.lng;
              _this.lat = res.point.lat;
              _this.page = 1;
              goodsLists({
                "page": _this.page,//页数
                "phpsid": _this.$route.params.sid,//session_id
                "lati": res.point.lat,//当前位置纬度
                "long": res.point.lng,//当前位置经度
                "share": _this.share,//1-分享进来的 0-本商家查看
              }).then(res => {
                _this.$store.dispatch('hideLoading');
                if (res.status === 1) {
                  _this.title = res.expand.store_name + '的土特产';
                  if (res.data.length) {
                    _this.list = res.data;
                  }
                } else if (res.status < 0) {
                  if (res.expand.type === 1) {
                    _this.$dialog.alert({
                      mes: res.expand.info,
                      callback: () => {
                        _this.$router.push('/login')
                      }
                    });
                  } else {
                    _this.$dialog.alert({
                      mes: res.expand.info,
                      callback: () => {
                        window.history.go(-1);
                      }
                    });
                  }
                }
              }).catch(res => {
                _this.$dialog.alert({
                  mes: '接口请求失败，确认重新加载',
                  callback: () => {
                    window.location.reload()
                  }
                });
              })
            });
          }
        })
      },
    },
    components: {
      Loading
    }

  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title-name
    background: $background-f;
    min-height: 1.3rem;
    padding: .5rem;
    font-size: .45rem;
    color: $color-title;
    line-height: .6rem;
    text-align: center;

  .list
    background: $background-f;
    padding: 0 .5rem;
    margin-bottom: 2.5rem;
    li
      position: relative;
      padding: .4rem .4rem .4rem 3.6rem;
      .pic
        position: absolute;
        top: .4rem;
        left: 0;
        bottom: 0;
        margin-right: .5rem;
        img
          width: 3.1rem;
          height: 3.1rem;
      .text
        height: 3.1rem;
        h3
          line-height: .63rem;
          font-size: .43rem;
          height: 1.26rem;
          margin-bottom: .64rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        p
          position: relative;
          line-height: .6rem;
          color: $color-address;
          font-size: .34rem;
          span
            position: absolute;
            top: 0;
            right: 0;
        .price
          color: $color-a;
          font-size: .5rem;
      .audit
        position: absolute;
        top: 2rem;
        right: 0;
        color: $color-main;
        font-size: .43rem;
        width: 2rem;

    .moreLoading
      text-align: center;
      img
        width: 2rem;

  .btn
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 1.4rem;
    text-align: center;
    font-size: .55rem;
    color: $color;
    background: $background-btn;


</style>
